<template>
	<view class="myCoupon">
		<z-paging ref="paging" :auto='true' bg-color="#F5F5F5" class="zpaing" v-model="dataList" @query="getDataList">
			<view class="coupItem" v-for="(item,index) in dataList" :key="index">
				<image src="/static/images/coupon/wsy.png" mode="" class="bckImage"></image>
				<view class="itLeft">
					<view class="couType">
						<text>满减券</text>
					</view>
					<view class="price">
						<text class="pText">60</text>
						<text class="pText2">元</text>
					</view>
					<text class="candition">满300可用</text>
				</view>
				<view class="itRight">
					<text>团购满减券-新人福利</text>
					<text class="greyP2">全平台可用</text>
					<text class="greyP">有效期：30天</text>
				</view>
				<view class="itRight2">
					<text>去使用</text>
				</view>
			</view>
			<view class="coupItem">
				<image src="/static/images/coupon/ysy.png" mode="" class="bckImage"></image>
				<view class="itLeft">
					<view class="couType itRight2Other">
						<text>折扣券</text>
					</view>
					<view class="price">
						<text class="pText">8.5</text>
						<text class="pText2">折</text>
					</view>
					<text class="candition">无门槛</text>
				</view>
				<view class="itRight">
					<text>新人折扣券</text>
					<text class="greyP2">全平台可用</text>
					<text class="greyP">有效期：30天</text>
				</view>
				<view class="itRight2 itRight2Other">
					<text>已使用</text>
				</view>
			</view>
			<view class="coupItem">
				<image src="/static/images/coupon/ygq.png" mode="" class="bckImage"></image>
				<view class="itLeft">
					<view class="couType itRight2Other">
						<text>折扣券</text>
					</view>
					<view class="price">
						<text class="pText">8.5</text>
						<text class="pText2">折</text>
					</view>
					<text class="candition">无门槛</text>
				</view>
				<view class="itRight">
					<text>新人折扣券</text>
					<text class="greyP2">全平台可用</text>
					<text class="greyP">有效期：30天</text>
				</view>
				<view class="itRight2 itRight2Other">
					<text>已过期</text>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import baseMixin from "@/mixin/baseMixin.js"
	export default {
		mixins: [baseMixin],
		data() {
			return {
				dataList: []
			}
		},
		methods: {
			getDataList(pageNo, pageSize) {
				this.$refs.paging.complete([
					{},
				]);
				// let params = {
				// 	pageNo: pageNo,
				// 	pageSize: pageSize
				// }
				// this.fnTestList(params).then((res) => {
				// 	this.$refs.paging.complete(res.rows);
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.greyP {
		color: rgba(153, 153, 153, 1);
	}

	.greyP2 {
		color: rgba(102, 102, 102, 1);
		margin: 40rpx 0;
	}

	.myCoupon {
		position: relative;

		.coupItem {
			position: relative;
			height: 228rpx;
			margin: 24rpx;
			display: flex;
			align-items: center;
			padding: 32rpx 24rpx 12rpx 50rpx;

			.itLeft {
				font-size: 24rpx;
				font-weight: 400;
				display: flex;
				flex-direction: column;
				align-items: center;

				.couType {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 104rpx;
					height: 36rpx;
					border-radius: 4rpx;
					background: rgba(76, 212, 230, 1);
					box-shadow: 2rpx 2rpx 4rpx;
					color: #fff;
				}

				.price {
					display: flex;
					align-items: flex-end;
					line-height: 42.43px;
					margin-top: 14rpx;

					.pText {
						font-size: 64rpx;
						font-weight: 600;
						color: rgba(54, 68, 79, 1);
					}

					.pText2 {
						position: relative;
						font-size: 28rpx;
						font-weight: 600;
						color: rgba(54, 68, 79, 1);
						top: 8rpx;
					}
				}

				.candition {
					color: rgba(94, 103, 110, 1);
					font-size: 24rpx;
				}
			}

			.itRight {
				display: flex;
				flex-direction: column;
				margin-left: 82rpx;
			}

			.itRight2 {
				position: absolute;
				top: 114rpx;
				right: 24rpx;
				width: 112rpx;
				height: 53rpx;
				border-radius: 32rpx;
				background: $theme-color;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 6rpx 20rpx 6rpx 20rpx;
				color: #fff;
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	}

	.itRight2Other {
		background: rgba(152, 160, 166, 1) !important;
	}
</style>